package com.mepo.cheer.client.pages;

import com.google.gwt.event.dom.client.ChangeEvent;
import com.google.gwt.event.dom.client.ChangeHandler;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.mepo.cheer.shared.Photos;

public class PhotosPage extends Composite {
	
	private VerticalPanel content = new VerticalPanel();
	private HTML embedCode = new HTML();
	
	public PhotosPage(final Photos p) {
		final ListBox dropBox = new ListBox(false);
		for(String key : p.getPhotoSets().keySet()) {
			dropBox.addItem(key);
		}
		dropBox.addChangeHandler(new ChangeHandler() {			
			@Override
			public void onChange(ChangeEvent event) {
				content.remove(embedCode);
				embedCode = new HTML(p.getPhotoSets().get(dropBox.getValue(dropBox.getSelectedIndex())));
				content.add(embedCode);
				content.setCellHorizontalAlignment(embedCode, HasHorizontalAlignment.ALIGN_CENTER);
			}
		});

		//initialize
		dropBox.setSelectedIndex(0);
		embedCode = new HTML(p.getPhotoSets().get(dropBox.getValue(dropBox.getSelectedIndex())));
		
		HorizontalPanel dropBoxPanel = new HorizontalPanel();
		dropBoxPanel.add(new Label("Choose Photos:"));
		dropBoxPanel.add(dropBox);
		
		Label photoHeader = new Label(p.getHeader());
		photoHeader.addStyleName("photo-header");
		
		
		content.setSize("100%", "100%");
		content.add(photoHeader);
		content.add(dropBoxPanel);
		content.add(embedCode);
		content.setCellHorizontalAlignment(photoHeader, HasHorizontalAlignment.ALIGN_CENTER);
		content.setCellHorizontalAlignment(embedCode, HasHorizontalAlignment.ALIGN_CENTER);

		initWidget(content);
	}	
	
}
